<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface Props {
  modelValue: string
  placeholder?: string
  autofocus?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'search'): void
  (e: 'close'): void
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '搜索文章...',
  autofocus: false,
})

const emit = defineEmits<Emits>()

const inputRef = ref<HTMLInputElement>()

/**
 * 处理输入值变化
 */
const handleInput = (event: Event): void => {
  const target = event.target as HTMLInputElement
  emit('update:modelValue', target.value)
}

/**
 * 处理回车键搜索
 */
const handleKeydown = (event: KeyboardEvent): void => {
  if (event.key === 'Enter') {
    emit('search')
  } else if (event.key === 'Escape') {
    emit('close')
  }
}

/**
 * 清空搜索内容
 */
const clearSearch = (): void => {
  emit('update:modelValue', '')
  inputRef.value?.focus()
}

onMounted(() => {
  if (props.autofocus && inputRef.value) {
    // 延迟聚焦以确保动画完成
    setTimeout(() => {
      inputRef.value?.focus()
    }, 300)
  }
})
</script>

<template>
  <div class="relative">
    <input
      ref="inputRef"
      :value="modelValue"
      type="text"
      :placeholder="placeholder"
      @input="handleInput"
      @keydown="handleKeydown"
      class="input w-full h-16 text-xl pl-16 pr-16 bg-base-100 text-base-content placeholder-base-content/50 border-2 border-base-300 rounded-2xl focus:border-primary focus:outline-none transition-all duration-200 shadow-2xl"
    />

    <!-- 搜索图标 -->
    <div class="absolute left-5 top-1/2 transform -translate-y-1/2">
      <span class="text-2xl text-base-content/50">🔍</span>
    </div>

    <!-- 清空按钮 -->
    <button
      v-if="modelValue"
      @click="clearSearch"
      class="absolute right-16 top-1/2 transform -translate-y-1/2 btn btn-ghost btn-sm btn-circle hover:bg-base-300 transition-colors"
    >
      <span class="text-lg">✕</span>
    </button>

    <!-- 关闭按钮 -->
    <button
      @click="emit('close')"
      class="absolute right-4 top-1/2 transform -translate-y-1/2 btn btn-ghost btn-circle hover:bg-error hover:text-error-content transition-colors"
    >
      <span class="text-xl">✕</span>
    </button>
  </div>
</template>

<style scoped>
.input {
  background-color: hsl(var(--b1)) !important;
  color: hsl(var(--bc)) !important;
  border-color: hsl(var(--b3)) !important;
}

.input::placeholder {
  color: hsl(var(--bc) / 0.5) !important;
}

.input:focus {
  box-shadow: 0 0 0 4px hsl(var(--p) / 0.1);
  border-color: hsl(var(--p)) !important;
  background-color: hsl(var(--b1)) !important;
  color: hsl(var(--bc)) !important;
}

/* 确保在所有主题下输入框文字都可见 */
.input:not(:placeholder-shown) {
  color: hsl(var(--bc)) !important;
}

/* 暗色主题特殊处理 */
[data-theme='dark'] .input {
  background-color: hsl(var(--b1)) !important;
  color: hsl(var(--bc)) !important;
  border-color: hsl(var(--b3)) !important;
}

[data-theme='dark'] .input::placeholder {
  color: hsl(var(--bc) / 0.6) !important;
}

[data-theme='dark'] .input:focus {
  background-color: hsl(var(--b1)) !important;
  color: hsl(var(--bc)) !important;
}

/* 亮色主题特殊处理 */
[data-theme='light'] .input {
  background-color: hsl(var(--b1)) !important;
  color: hsl(var(--bc)) !important;
  border-color: hsl(var(--b3)) !important;
}

[data-theme='light'] .input::placeholder {
  color: hsl(var(--bc) / 0.5) !important;
}

[data-theme='light'] .input:focus {
  background-color: hsl(var(--b1)) !important;
  color: hsl(var(--bc)) !important;
}
</style>
